<!--  -->
<template>
<div class=''>
  <!-- action 必选参数，上传的地址 -->
  <el-upload
    action="http://linweiqin.cn:8001/v1/addimg/avatar"
    :show-file-list='false'
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    >
    <img v-if = "imgUrl" :src="imgUrl" alt="">
    <i v-else class="el-icon-plus upload"></i>
    </el-upload>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      imgUrl: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleAvatarSuccess: function (e) {
      // console.log(e)
      // image_path: "17665a0344d806.jpg"
      // status: 1
      this.imgUrl = 'http://linweiqin.cn:8001/img/' + e.image_path
    },
    beforeAvatarUpload: function (e) {
      let typeLimit = false
      let sizeLimit = false
      if (e.type === 'image/jpeg' || e.type === 'image/jpg') {
        typeLimit = true
      }
      if (e.size / 1024 / 1024 < 2) {
        sizeLimit = true
      }
      // console.log(e)
      // 以下为返回信息，可更具size和type来限制文件大小和类型
      // lastModified: 1608021913676
      // lastModifiedDate: Tue Dec 15 2020 16:45:13 GMT+0800 (中国标准时间) {}
      // name: "1.jpg"
      // size: 17194
      // type: "image/jpeg"
      // uid: 1608022759200
      // webkitRelativePath: ""
      // __proto__: File
      return typeLimit && sizeLimit
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
  .upload{
    height: 200px;
    width: 200px;
    border: 1px dashed #ddd;
    line-height: 200px;
    font-size: 28px;
    text-align: center;
    color: #ccc;
  }
</style>
